<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>我最喜爱的汽车投票系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header {
            padding: 30px;
            background-color: rgba(0, 0, 255, 0.58);
            color: white;
            display: flex;
            justify-content: space-between;
            border: 1px solid white;
        }

        #menu {
            position: relative;
            top: 10px;
        }

        #menu li {
            display: inline-block;
            font-size: 20px;
        }

        #container ul {
            display: flex;
            width: 100%;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }

        #container {
            width: 90%;
            height: 880px;
            margin: 0 auto;
        }

        #container li {
            width: 21%;
            margin-top: 20px;
        }

        li {
            list-style-type: none;
        }

        img {
            width: 100%;
        }

        #container h1 {
            background-color: #ff9406;
            color: white;
            margin: 20px auto;
            text-align: center;
            width: 50%;
        }

        /*//响应式布局*/

        @media screen and (min-width: 1024px) and (max-width: 1366px) {
            #container li {
                width: 30%;
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1024px) {
            #container li {
                width: 26%;
            }
        }

        @media screen and (min-width: 410px) and (max-width: 768px) {
            #container li {
                width: 40%;
            }
        }

        @media screen and (max-width: 410px) {
            #container {
                width: 100%;
            }

            #container li {
                width: 80%;
            }
        }

        @media screen and (max-width: 650px) {
            header {
                display: block;
            }
        }

        @media screen and (max-width: 500px) {
            header h1 {
                font-size: 20px;
                text-align: center;
            }
        }

        .num {
            text-align: center;
        }

    </style>
</head>
<body>
<header>
    <h1>欢迎进入汽车在线投票系统</h1>
    <ul id="menu">
        <?php
        if (isset($_SESSION['loggedUsername']) and $_SESSION['loggedUsername'] != "") { //说明已经登录了
            ?>
            <?php
            if (isset($_SESSION['admin']) and $_SESSION['admin'] != '') { //说明是管理员
                ?>
                <li><a href="admin.php">会员管理</a></li>
                <li><a href="car.php">车辆管理</a></li>
                <li><a href="count.php">查看统计</a></li>
                <?php
            }
            ?>
            <li><a href="modify.php">修改密码</a></li>
            <li><a href="logout.php">注销</a></li>
            <?php
        } else {
            ?>
            <li><a href="in.php">登录</a></li>
            <li><a href="singup.php">注册</a></li>
            <?php
        }
        ?>
    </ul>
</header>
<?php
include_once "conn.php";
$sql = "select * from carinfo order by rand()";
$result = mysqli_query($conn, $sql);
?>
<div id="container">
    <h1>投票车辆</h1>
    <ul>
        <?php
        while ($info = mysqli_fetch_array($result)) {
            ?>
            <li>
                <a href="vote.php?id=<?php echo $info['id'] ?>">
                    <img src="img/<?php echo $info['pic'] ?>">
                </a>
                <div class="infor">
                    <div class='num'>当前票数 <span><?php echo $info['currentNum'] ?></span></div>
                </div>
            </li>
            <?php
        }
        ?>
    </ul>
    <h1>提交</h1>
</div>


</body>
</html>